<template>
<div id="nav" :style="{opacity:opacity}"></div>
    <div class="item">
        <img :src="top.pic" alt="">
        <p>{{top.title}}</p>
    </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity';
import { onMounted } from '@vue/runtime-core';
import {useRouter} from 'vue-router'
import axios from 'axios'
export default {
    setup(){
        const state =reactive({
            top:{},
            opacity:0
        })
        const router =useRouter();
        onMounted(()=>{
            var {id} =router.currentRoute.value.query
            console.log(id);
            axios.get(`http://122.112.161.135:4000/api/movieDetail?id=${id}`).then(res=>{
                console.log(res.data.res);
                state.top =res.data.res[0]
            })
        })
        const refsState =toRefs(state)
        return{
            ...refsState
        }
    }

};
</script>

<style  scoped>
#nav{
    position: fixed;
    line-height: 50px;
    height: 50px;
    background: red;
    width: 100%;
}
.item{
   position: relative;
   top: 70px;
}
</style>